<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>
<label>城市：</label>
<select id="sltCity">
    <!-- <option value="1">天津</option>
     <option value="2">北京</option>
     <option value="3">上海</option>-->
</select>

</body>
<script src="../data/cities.js"></script>

<script>



    /**
     *  1. 获取dom节点引用-- 父节点引用
     *  2. 创建dom节点
     *  3. appendChild removeChild insertBefore replaceChild
     * */

    var sltCity = document.getElementById('sltCity');

    /*var opt = document.createElement('option');
    opt.value = cities[1].id;
    opt.innerText = cities[1].name;

    sltCity.appendChild(opt);*/


    for (var i = 0; i < cities.length; i++) {
        var opt = document.createElement('option');
        opt.value = cities[i].id;
        opt.innerText = cities[i].name;

        sltCity.appendChild(opt);
    }

    sltCity.removeChild(sltCity.lastChild);

    var opt1 = document.createElement('option');
    opt1.value = cities[1].id;
    opt1.innerText = 'New York';

   // sltCity.insertBefore(opt1,sltCity.lastChild)
    sltCity.replaceChild(opt1,sltCity.lastChild);

</script>

</html>
